<template>
  <div>
    <div class="course" v-if="showCourseList">
      <div v-if="courseList.length==0" style="height: 50px;color: gray;text-align: center">
        <span>您还没有课程笔记哦！</span>
      </div>
      <div v-else>
       <el-card class="el-col-11 course_card" v-for="item in courseList" :key="item.courseId">
        <div class=" left_div">
          <el-image
            style="width: 100%;height: 100%"
            :src="item.imageUrl"
            fit="contain">
          </el-image>
        </div>
        <div class=" right_div">
          <div class="title" @click="toDetailNote(item)">
            <span>{{item.title}}</span>
          </div>
          <div>
            <el-tag type="success">笔记{{item.size}}条</el-tag>
          </div>
        </div>
      </el-card>
      </div>
    </div>
    <div class="course_note" v-else>
      <div class="course_top">
        <div>
          <div class="detail_title">
            <span style="color: #f34343">{{linCourse.title}}</span>
            <span>---课程笔记</span>
          </div>
          <div class="detail_btn">
            <el-tag type="success">笔记{{linCourse.size}}条</el-tag>
            <el-button size="large" @click="toNoteList">返回列表</el-button>
          </div>
        </div>
      </div>
      <div v-for="item in noteList" :key="item.noteId" class="note_div">
        <div>
          <i class="el-icon-video-camera" style="color: #00b43c;margin-right: 10px"></i>
          <span style="cursor: pointer;" @click="toLearn(item.sectionId, linCourse.courseId)">{{item.sectionName}}</span>
        </div>
        <div class="note_content">
          <p v-html="item.content"></p>
        </div>
        <div class="note_image">
          <div class="image-box" v-if="item.screenShot!=0">
            <el-tooltip class="item" effect="dark" content="点击查看大图" placement="bottom">
              <el-image :src="item.screenUrl"
                        :preview-src-list="[item.screenUrl]"
              ></el-image>
            </el-tooltip>
          </div>
        </div>
        <div style="text-align: right">
          <div class="left_option" v-if="item.forward!=0">转发自：<a>{{item.forwardUserNickname}}</a></div>
          <div class="right_time">{{item.createTime}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'Note',
  data () {
    return {
      showCourseList: true,
      linCourse: '',
      courseList: [],
      noteList: []
    }
  },
  computed: mapState({
    user: 'user'
  }),
  mounted () {
    this.getNoteCourse()
  },
  methods: {
    getNoteCourse () {
      var _this = this
      this.$axios.post('/api/note/getNoteCourse',
        this.$qs.stringify({
          userId: this.user.userId
        })
      )
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.courseList = data.result
          }
        })
    },
    toDetailNote (course) {
      this.linCourse = course
      this.showCourseList = false
      this.getSelfNote(course.courseId)
    },
    toNoteList () {
      this.showCourseList = true
    },
    getSelfNote (courseId) {
      var _this = this
      var noteQueryData = {}
      noteQueryData.courseId = courseId
      noteQueryData.queryUserId = this.user.userId
      this.$axios.post('/api/note/getSelfNote',
        this.$qs.stringify({
          noteQueryData: JSON.stringify(noteQueryData)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.noteList = data.result
        }
      })
    },
    toLearn (sectionId, courseId) {
      this.$router.push(
        {path: '/video',
          query: {
            sectionId: sectionId,
            courseId: courseId,
            path: this.$route.fullPath
          }
        }
      )
    }
  }
}
</script>

<style >
  .course {
    text-align: left;
  }
  .course .course_card{
    margin-right: 5px;
  }
  .course .left_div{
    width: 25%;
    height: 68px;
    display: inline-block;
    float: left;
  }
  .course .right_div{
    width: 70%;
    padding-left: 15px;
    display: inline-block;
  }
  .course .right_div .title {
    margin-bottom: 10px;
    cursor: pointer;
  }
  .course .right_div .title span{
    font-size: 20px;
    font-weight: bold;
  }
  .course_note .detail_title{
    display: inline-block;
    float: left;
  }
  .course_note .detail_title span{
    font-size: 30px;
  }
  .course_note .course_top{
    background-color: #f8fafc;
    padding: 20px;
  }
  .note_div {
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 1px solid #EAEAEA;
    margin: 10px 0px;
  }
  .note_div .note_content{
    padding: 0px 30px;
    min-height: 50px;
  }
  .note_div .note_image{
    padding: 0px 30px;
  }
  .note_div .image-box{
    display: inline-block;
    width: 180px;
    height: 110px;
  }
  .image-box .el-icon-circle-close{
    color: #FFF;
  }
  .left_option{
    display: inline-block;
    float: left;
    color: #909090;
    padding-left: 30px;
  }
  .right_time{
    display: inline-block;
    color: #c7c7c7;
  }
</style>
